<template>
  <div>
    <div class="serverNode">

      <Card class="card" v-if="nodes.length===0">
        <p>暂无节点数据，请前往路由管理添加吧</p>
      </Card>
      <Card class="card" v-for="(item,index) in nodes ">
        <p slot="title">{{item.routerDesc}}</p>
        <p>路由ID：{{item.routerId}}</p>
        <p>节点ID：{{item.nodeId}}</p>
        <p>连接数：<span style="color: #1890ff">{{item.connectNum}}</span></p>
        <p>错误数：<span style="color: red">{{item.errorNum}}</span></p>
        <p>节点状态：<span :style="{'color':(item.health==true ? '#18ff00':'#e31200')}">{{item.health==true?'健康':'停机'}}</span></p>
        <p>节点名字：{{item.nodeDesc}}</p>
        <p>路由地址：{{item.url}}</p>
        <p>地址：{{item.inetSocketAddress}}</p>
        <p>负载算法：{{item.strategyType}}</p>
        <p>节点类型：<span :style="{'color':(item.type==false ? '#0313ff':'#8287c6')}">{{item.type==false?"线上":"备用"}}</span></p>
      </Card>
    </div>
  </div>
</template>
<script>
    import {allNode} from '@/api/serverNodeStatus'

    export default {
        data() {
            return {
                nodes: []
            }
        },
        created() {
            this.getData()
        },
        methods: {
            getData() {
                let _this = this;
                allNode().then(data => {
                    if (data.data.code === 200) {
                        _this.nodes = data.data.data;
                    }
                })

            },
        }
    }
</script>
<style>
  .serverNode {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
  }
  p{
    word-wrap:break-word;
  }
  .card {
    width: 23%;
    margin: 1%;
  }
</style>
